<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Feed
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-item-group relaxed="very" divided >
        <sui-item >
          <sui-item-image src="https://semantic-ui-vue.github.io/static/images/wireframes/image.png"/>
          <sui-item-content vertical-align="middle">
            <sui-item-header>标题</sui-item-header>
            <sui-item-meta>
              <span>1小时之前</span>
            </sui-item-meta>
            <sui-item-description>
              <p>不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的
                不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的</p>
            </sui-item-description>
            <sui-item-extra>
              <sui-icon name="like"/>
              喜欢
            </sui-item-extra>
          </sui-item-content>
        </sui-item>
        <sui-item>
          <sui-item-image src="https://semantic-ui-vue.github.io/static/images/wireframes/image.png"/>
          <sui-item-content>
            <sui-item-header>标题</sui-item-header>
            <sui-item-meta>
              <span>1小时之前</span>
            </sui-item-meta>
            <sui-item-description>
              <p>不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的
                不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的
                不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的
                不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的
                不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的
                不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的
                不断用来测试的不断用来测试的不断用来测试的不断用来测试的不断用来测试的
                不断用来测试的不断用来测试的不断用来测试的</p>
            </sui-item-description>
            <sui-item-extra>
              <sui-icon name="like"/>
              喜欢
            </sui-item-extra>
          </sui-item-content>
        </sui-item>
      </sui-item-group>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Item'
}
</script>

<style scoped>

</style>
